<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        @font-face {
            font-family: "仓耳渔阳体 W03";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/AYMR1IrQDcCNKlhqM1HpF.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/WkpzPxExmv6oLmuxa1ixN.woff") format("woff");
            font-display: swap;
        }
        @font-face {
            font-family: "仓耳渔阳体 W03";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/mbKHRcQwzc6Q4f8-aUvRG.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/mkYuQC5mENPh7Nm-kFsUK.woff") format("woff");
            font-display: swap;
        }
        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <br>
    <div id="accordion">
        <div class="card shadow-lg">
            <div class="card-header" id="div1" style="text-align: center;cursor: pointer">
                <a class="btn" id="leave_apply" data-bs-toggle="collapse" href="#collapseOne" style="box-shadow: none;font-size: 18px">请假申请</a>
            </div>
            <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                <div class="card-body">
                    <form class="row g-3">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <label for="staff_id" class="form-label">工号</label>
                            <input type="text" class="form-control text-muted shadow-sm" id="staff_id" placeholder="职工编号(ID)" style="background-color: white;box-shadow: none">
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4"></div>
                        <div class="col-2">
                            <label for="leave_start_time" class="form-label">开始时间</label>
                            <input type="date" class="form-control text-muted shadow-sm" id="leave_start_time" style="background-color: white;box-shadow: none">
                        </div>
                        <div class="col-2">
                            <label for="leave_end_time" class="form-label">结束时间</label>
                            <input type="date" class="form-control text-muted shadow-sm" id="leave_end_time" style="background-color: white;box-shadow: none">
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4"></div>
                        <div class="col-4">
                            <label for="leave_reason">申请原因</label>
                            <textarea class="form-control text-muted shadow-sm" rows="5" id="leave_reason" placeholder="(150字以内)" style="resize: none;background-color: white;box-shadow: none"></textarea>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-12" style="text-align: center">
                            <button type="button" id="apply" class="btn btn-primary" style="box-shadow: none;background-color: #337ab7">申请</button>
                            <button id="apply_load" class="btn btn-primary" disabled style="display: none;box-shadow: none;background-color: #337ab7">
                                <span class="spinner-border spinner-border-sm"></span>
                                申请
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card shadow-lg">
            <div class="card-header" id="div2" style="text-align: center;cursor: pointer">
                <a class="collapsed btn" id="leave_info" data-bs-toggle="collapse" href="#collapseTwo" style="box-shadow: none;font-size: 18px">请假记录</a>
            </div>
            <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                <div class="card-body">
                    <form class="row g-3">
                        <div class="col-md-1"></div>
                        <div class="col-md-10" style="text-align: center">
                            <button type="button" id="leave_btn" data-bs-toggle="modal" data-bs-target="#myModal_leave" style="width: 0px;height: 0px;display: none"></button>
                            <table id="table" class="table table-hover" style="text-align: center;table-layout: fixed;">
                                <thead>
                                <tr>
                                    <th style="width: 80px">编号</th>
                                    <th style="width: 180px">申请时间</th>
                                    <th style="width: 280px">申请原因</th>
                                    <th style="width: 100px">审核状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <c:forEach items="${leaves}" var="leave">
                                        <%int id=1;%>
                                        <tr class="tr" style="cursor: default" url="{'id':'${leave.id}','state':'${leave.state}','start':'${leave.startTime}','end':'${leave.endTime}','reason':'${leave.reason}'}">
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><%=id%></td>
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.startTime} - ${leave.endTime}</td>
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.reason}</td>
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                                <a id="a" style="font-family: '仓耳渔阳体 W03';font-size: 28px">${leave.state==1?"通过":(leave.state==-1?"不通过":"待审核")}</a>
                                            </td>
                                        </tr>
                                        <%id++;%>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-1"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <br>
</div>
<%--
<i url="#" class="fa fa-pencil-square-o edit" style="font-size:24px;cursor: pointer;color: #a7a7a8;" title="修改"></i>&nbsp;
<i url="#" id="revoke" class="fa fa-mail-reply" style="font-size:24px;cursor: pointer;color: #80e6fc" title="撤销" ></i>&nbsp;
<i url="#" id="send" class="fa fa-send-o" style="font-size:24px;cursor: pointer;color: #fae37d" title="发送"></i>
<i url="#" id="delete" class="fa fa-trash-o" style="font-size:24px;cursor: pointer;color: #fa99a4" title="删除"></i>&nbsp;
--%>

<%--信息提示框--%>
<div class="container mt-3" style="text-align: center;width: 360px;height: 20px;position: absolute;top: 78px;left:38%">
    <div class="alert alert-success" id="success" style="background-color: #dff0d8;display: none"></div>
    <div class="alert alert-info" id="info" style="background-color: #d9edf7;display: none"></div>
    <div class="alert alert-danger" id="danger" style="background-color: #f2dede;display: none"></div>
</div>
</body>
<script>
    /*$('#edit').hover(function(){
        $('#edit').css("color","#212121");
    },function(){
        $('#edit').css("color","#a7a7a8");
    });//鼠标悬浮、离开事件
    $('#delete').hover(function(){
        $('#delete').css("color","#f55f70");
    },function(){
        $('#delete').css("color","#fa99a4");
    });//鼠标悬浮、离开事件
    $('.revoke').hover(function(){
        $('.revoke').css("color","#03cefc");
    },function(){
        $('.revoke').css("color","#80e6fc");
    });//鼠标悬浮、离开事件
    $('#send').hover(function(){
        $('#send').css("color","#f1ce15");
    },function(){
        $('#send').css("color","#fae37d");
    });//鼠标悬浮、离开事件*/

    //第一个卡片点击
    document.getElementById('div1').onclick=function (){
        document.getElementById('leave_apply').click()
    }
    //第二个卡片点击
    document.getElementById('div2').onclick=function (){
        document.getElementById('leave_info').click()
        $.post("http://localhost:8080/web/leave/select",
            {id:${account}},
            function (resp){
                let style="<thead>"+"<tr>"+
                    "<th style='width: 80px'>编号</th>"+
                    "<th style='width: 180px'>申请时间</th>"+
                    "<th style='width: 280px'>申请原因</th>"+
                    "<th style='width: 100px'>审核状态</th>"+
                    "</tr>"+"</thead>"+"<tbody>"
                $('#table').empty()
                for (let i = 0; i < resp.length; i++) {
                    style+="<tr class='tr' style='cursor: default' url=\"{'id':'"+resp[i].id+"','state':'"+resp[i].state+"','start':'"+resp[i].startTime+"','end':'"+resp[i].endTime+"','reason':'"+resp[i].reason+"'}\">"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+(i+1)+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].startTime+" - "+resp[i].endTime+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].reason+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'><a style=\"font-family: '仓耳渔阳体 W03';font-size: 28px\">"+(resp[i].state==1?"通过":(resp[i].state==-1?"不通过":"待审核"))+"</a></td>"+
                        "</tr>"
                }
                style+="</tbody>"
                $('#table').append(style)
                judge()
            },"json"
        )
    }
    //申请按钮
    $('#apply').click(function (){
        let start=new Date($('#leave_start_time').val()).getTime()
        let end=new Date($('#leave_end_time').val()).getTime()
        if($('#staff_id').val()==""||$('#leave_start_time').val()==""||$('#leave_end_time').val()==""||$('#leave_reason').val()==""){
            $('#danger').text('请完善信息')
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else if($('#staff_id').val()!=${account}){
            $('#danger').text('填写的ID与本人ID不一致')
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else if(start>end){
            $('#danger').text('日期填写错误')
            $('#danger').fadeToggle("slow")
            setTimeout(function (){
                $("#danger").fadeToggle("slow")
            },2000)
        }else{
            $('#apply').hide()
            $('#apply_load').show()
            $('#success').text('申请已提交')
            $.ajax({
                url:"http://localhost:8080/web/leave/add",
                type:'post',
                async:false,
                data:{staff_id:$('#staff_id').val(),start:$('#leave_start_time').val(),end:$('#leave_end_time').val(),reason:$('#leave_reason').val()},
                dataType:'json',
                success:function (resp){
                    if(resp==1)
                    setTimeout(function (){
                        $('#apply_load').hide()
                        $('#apply').show()
                        $('#success').fadeToggle("slow")
                        setTimeout(function (){
                            $('#success').fadeToggle("slow")
                        },2000)
                    },888)
                }
            })
        }
    })
    //判断审核状态
    function judge(){
        $('.tr').each(function (index,element){
            function replaceAll(str, find, replace){
                return str.replace(new RegExp(find, 'g'), replace);
            }
            let url = replaceAll($(element).attr('url'),"\'", "\"");
            let json=JSON.parse(url)
            if(json.state==1){
                $(element).find('a').css('color','#5cb85c')
            }else if(json.state==-1){
                $(element).find('a').css('color','#d9534f')
            }else if(json.state==0){
                $(element).find('a').css('color','#337ab7')
            }
        })
    }
</script>
</html>
